<template>
  <div>
       <Header></Header>
       <div class="add">
        <h3>修改轮播图</h3>
        <el-row :gutter="30">
            <el-col :span="10"
                ><div class="grid-content bg-purple">
                    <el-form :model="oneData" label-width="80px">
                        <el-form-item label="商品编号">
                            <el-input v-model="oneData.goods_id"></el-input>
                        </el-form-item>
                        <el-form-item label="导航地址">
                            <el-input v-model="oneData.navigator_url"></el-input>
                        </el-form-item>
                        <el-form-item label="打开方式">
                            <el-input v-model="oneData.open_type"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button   type="primary" @click="onSubmit" >修改数据</el-button>
                        </el-form-item>
                    </el-form>
                </div></el-col
            >
            <el-col :span="4"><div class="grid-content bg-purple">
                    <el-upload
                        class="avatar-uploader"
                        action="http://web.woniulab.com:8005/admin/fileUpload"
                        :headers="headers"
                        name="imgSrc"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess" >
                        
                        <img v-if="oneData.image_src" :src="oneData.image_src" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload></div
            ></el-col>
        </el-row>
       </div>
    </div>
</template>

<script>
import Header from '../common/Header.vue'
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('swipers')
export default {
     components:{
        Header
    },
    data() {
        return {
            _id:'',
            token:''
        }
    },
    created(){
       this.token = localStorage.getItem("token")
        this._id= this.$route.params._id;
        this.getOneDataAsync(this._id)
    },
    computed:{
        ...mapState(['oneData']),
        headers(){
            return{
                "Authorization": this.token
            }
         },
    },
    methods: {
        ...mapActions(['getOneDataAsync','updateAsync']),
        //图片上传成功触发
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.oneData.image_src = 'http://web.woniulab.com:8005/images/' + res.data
        },
        //修改
       async onSubmit(){
          const {data} = await this.updateAsync(this.oneData)
        //   console.log('data',data);
          if(data.code == 200){
              this.$alert('数据修改成功！', '提示窗口', {
                     confirmButtonText: '确定',
                });
                this.$router.push('/SwipersList')
          }
        },
    },
}
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
.el-select{
    width: 435px;
}
.el-button {

    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover{
         background-color: rgb(202, 219, 248);
         border-color: rgb(202, 219, 248);
    }
}
.avatar-uploader, .el-upload {
    border: 2px dashed red;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ,.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 200px;
    height: 100px;
    display: block;
}
</style>